<template>
  <MenuItem
    :name="item.path"
    v-if="!menuHasChildren(item) && getShowMenu"
    v-bind="$props"
    :class="getLevelClass"
    :style="`color: ${getColor}`"
  >
    <!-- <Icon v-if="getIcon" :icon="getIcon" :size="16" /> -->
    <div class="flex" style="align-items: center;  justify-content: center; ">
      <svg v-if='item.path.indexOf("xinwen/zixun")>0' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        fill="none" version="1.1" width="13" height="13" viewBox="0 0 20 21.500001907348633">
        <g><path d="M20,18L0,18L0,16L1,16L1,9.031C1,4.043,5.03,0,10,0C14.97,0,19,4.043,19,9.031L19,16L20,16L20,18ZM7.5,19L12.5,19C12.5,20.3807,11.3807,21.5,10,21.5C8.61929,21.5,7.5,20.3807,7.5,19Z" fill="#212123" fill-opacity="1"/></g>
      </svg>

      <svg v-if='item.path.indexOf("selfstock")>0' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
        fill="none" version="1.1" width="16" height="16" viewBox="0 0 18 20"><g><path d="M5,3L8,3L8,12L5,12L5,15L3,15L3,12L0,12L0,3L3,3L3,0L5,0L5,3ZM15,8L18,8L18,17L15,17L15,20L13,20L13,17L10,17L10,8L13,8L13,5L15,5L15,8Z" fill="#212123" fill-opacity="1"/></g>
      </svg>

      <svg v-if='item.path.indexOf("select_stock")>0' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
        fill="none" version="1.1" width="14" height="14" viewBox="0 0 16 19"><g><path d="M6,11L0,2L0,0L16,0L16,2L10,11L10,17L6,19L6,11Z" fill="#212123" fill-opacity="1"/></g>
      </svg>

      <svg v-if='item.path.indexOf("stock_history")>0' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
        fill="none" version="1.1" width="15" height="15" viewBox="0 0 24 24"><defs><clipPath id="master_svg0_1107_03059/782_07523"><rect x="0" y="0" width="24" height="24" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_1107_03059/782_07523)"><g><path d="M16,2L21,6.999L21,21.009C21,21.556,20.555,22,20.007,22L3.993,22C3.445,22,3,21.545,3,21.008L3,2.992C3,2.444,3.445,2,3.993,2L16,2ZM13,9L11,9L11,15L16,15L16,13L13,13L13,9Z" fill="#212123" fill-opacity="1"/></g></g>
      </svg>
    </div>
    <div v-if="collapsedShowTitle && getIsCollapseParent" class="mt-1 collapse-title">
      {{ getI18nName }}
    </div>
    <template #title>
      <span :class="['ml-2', `${prefixCls}-sub-title`]">
        {{ getI18nName }}
      </span>
      <SimpleMenuTag :item="item" :collapseParent="getIsCollapseParent" />
    </template>
  </MenuItem>
  <SubMenu
    :name="item.path"
    v-if="menuHasChildren(item) && getShowMenu"
    :class="[getLevelClass, theme]"
    :collapsedShowTitle="collapsedShowTitle"
    :style="`color: ${getColor}`"
  >
    <template #title>
      <Icon v-if="getIcon" :icon="getIcon" :size="16" />

      <div v-if="collapsedShowTitle && getIsCollapseParent" class="mt-2 collapse-title">
        {{ getI18nName }}
      </div>

      <span v-show="getShowSubTitle" :class="['ml-2', `${prefixCls}-sub-title`]">
        {{ getI18nName }}
      </span>
      <SimpleMenuTag :item="item" :collapseParent="!!collapse && !!parent" />
    </template>
    <template v-for="childrenItem in item.children || []" :key="childrenItem.path">
      <SimpleSubMenu v-bind="$props" :item="childrenItem" :parent="false" />
    </template>
  </SubMenu>
</template>
<script lang="ts">
  import type { PropType } from 'vue';
  import type { Menu } from '/@/router/types';

  import { defineComponent, computed } from 'vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  import Icon from '/@/components/Icon/index';

  import MenuItem from './components/MenuItem.vue';
  import SubMenu from './components/SubMenuItem.vue';
  import { propTypes } from '/@/utils/propTypes';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';

  export default defineComponent({
    name: 'SimpleSubMenu',
    components: {
      SubMenu,
      MenuItem,
      SimpleMenuTag: createAsyncComponent(() => import('./SimpleMenuTag.vue')),
      Icon,
    },
    props: {
      item: {
        type: Object as PropType<Menu>,
        default: () => ({}),
      },
      parent: propTypes.bool,
      collapsedShowTitle: propTypes.bool,
      collapse: propTypes.bool,
      theme: propTypes.oneOf(['dark', 'light']),
    },
    setup(props) {
      console.log('menuitem:', props.item);
      const { t } = useI18n();
      const { prefixCls } = useDesign('simple-menu');

      const getShowMenu = computed(() => !props.item?.meta?.hideMenu);
      const getIcon = computed(() => props.item?.icon);
      const getColor = computed(() => props.item?.color);
      const getI18nName = computed(() => t(props.item?.name));
      const getShowSubTitle = computed(() => !props.collapse || !props.parent);
      const getIsCollapseParent = computed(() => !!props.collapse && !!props.parent);
      const getLevelClass = computed(() => {
        return [
          {
            [`${prefixCls}__parent`]: props.parent,
            [`${prefixCls}__children`]: !props.parent,
          },
        ];
      });

      function menuHasChildren(menuTreeItem: Menu): boolean {
        return (
          !menuTreeItem.meta?.hideChildrenInMenu &&
          Reflect.has(menuTreeItem, 'children') &&
          !!menuTreeItem.children &&
          menuTreeItem.children.length > 0
        );
      }

      return {
        prefixCls,
        menuHasChildren,
        getShowMenu,
        getIcon,
        getColor,
        getI18nName,
        getShowSubTitle,
        getLevelClass,
        getIsCollapseParent,
      };
    },
  });
</script>
